.p-map {
  height: 100vh;
  position: relative;

  > .inner {
  }

  .position-center {
    padding: 2.4rem;
    text-align: center;
    @include boxSize();

    &.success {
      &:after {
        position: absolute;
        z-index: -1;
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 50%;
        @include transform(translateY(-50%));
        content: "";
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: url(/img/prize/price-light.png);
      }
    }

    > .content {
      @include borderRadius(1rem);
      background: #fff;
      border: 2px solid #d1ebff;
      overflow: hidden;
      @include boxShadow();

      .map-wrapper {
        width: 100%;
        font-size: 0;
        position: relative;

        &.map-sichuan {
          .map-car {
            width: 23vw;
            right: 6vw;
            top: 31vw;
          }

          .map-board {
            &.board-1 {
              left: 15vw;
              top: 15vw;
            }

            &.board-2 {
              right: 5vw;
              bottom: 48vw;
              z-index: 19;
            }
          }
        }

        &.map-xinjiang {
          .map-car {
            width: 25vw;
            left: 27vw;
            top: 55vw;
          }

          .map-board {
            &.board-1 {
              left: 5vw;
              top: 18vw;
              z-index: 13;
            }

            &.board-2 {
              right: 5vw;
              bottom: 50vw;
              z-index: 19;
            }
          }
        }

        .map-item {
          position: absolute;
          z-index: 12;

          &.lock {
            filter: grayscale(1);
          }

          > * {
          }

          .map-item-location {
            width: 13vw;
            position: absolute;

          }

          .map-item-badge {
            width: 15vw;
            position: absolute;

          }

          .map-item-thumb {
            width: 100%;
          }
        }
      }

      .map-holder {
        position: relative;
        z-index: 11;
        width: 100%;
      }

      .map-title {
        position: absolute;
        z-index: 99;
        right: 3vw;
        top: 3vw;
        width: 30vw;
      }

      .map-decoration {
        position: absolute;
        z-index: 12;
      }

      .map-router {
        top: 0;
        left: 0;
        width: 100%;
        position: absolute;
        z-index: 12;
      }

      .map-board {
        position: absolute;
        z-index: 11;
        width: 20vw;
      }

      .map-car {
        position: absolute;
        z-index: 14;
      }

    }

    > .footer {
      margin-top: 2.4rem;
    }

  }
}

.cp-task-header {
  color: #fff;


  > .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.2rem;
    border: 1px solid #fff;
    @include borderRadius(1.4rem);
    box-shadow: inset 0 0 18px -3px #fff;

    .part {
      text-align: center;
    }

    .title {
      font-size: 1.6rem;
    }

    .val {
      margin-top: .8rem;
      font-size: 1.4rem;
      box-shadow: inset 0 0 18px -3px #fff;
      border: 1px solid #fff;
      padding: 0.4rem 1.2rem;
      display: inline-block;
      @include borderRadius(.6rem);

    }
  }

  > .extra {
    text-align: center;
    padding: 1.2rem 0;
    font-size: 1.8rem;
    height: 4.5rem;
    @include boxSize();

    .pads {
      display: inline-block;

      .pad {
        position: relative;
        margin-right: 6px;
        color: #333;
        @include borderRadius(3px);
        background: #fff;
        width: 32px;
        display: inline-block;

        //> font {
        //  width: 30px;
        //  display: inline-block;
        //  position: relative;
        //  letter-spacing: 8px;
        //  font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, segoe ui, arial, roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
        //  margin-right: 2px;
        //  color: #333;
        //
        //  &:before,
        //  &:after {
        //    content: "";
        //    width: 14px;
        //    height: 100%;
        //    @include borderRadius(3px);
        //    background: #fff;
        //    position: absolute;
        //    z-index: -1;
        //    top: 0;
        //  }
        //
        //  &:before {
        //    left: -2px;
        //  }
        //
        //  &:after {
        //    right: 0;
        //  }
        //}


      }
    }
  }
}

.cp-task-content {
  border: 1px solid #fff;
  @include borderRadius(1.4rem);
  box-shadow: inset 0 0 18px -3px #fff;
  padding: 8rem 2rem 2.4rem 2rem;
  text-align: center;
  position: relative;

  .deco.deco-flight {
    width: 60px;
    position: absolute;
    right: -10px;
    top: -30px;
  }

  .box-wrapper {
    height: 210px;
    position: relative;

    .box {
      position: absolute;
      width: 100vw;
      top: 50%;
      left: 50%;
      @include transform(translate(-50%, -50%));
      z-index: 11;
    }

    .stripe {
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      top: 50%;
    }
  }

  .title {
    padding: .8rem 0 3rem;
    font-size: 1.4rem;
    color: var(--adm-color-primary);
    text-align: center;
    line-height: 2rem;
  }

  .operation {
    .adm-button.act-btn.act-btn-normal {
      width: auto;
      min-width: 10rem;
      padding: 0 1.2rem;
    }
  }

}

.cp-task-footer {
  .operation {
    padding: 1.2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;

    .adm-button.act-btn.act-btn-normal {
      width: 15rem;
    }
  }
}